<template>
  <div class="box_z" style="background: #fff">
    <!-- <div class="btn_sear_z">
      <button class="btn_sear">
        <van-icon size="16px" name="search" />
        <span>请输入搜索关键词</span>
      </button>
    </div> -->
    <!-- <div class="beijing"></div> -->
    <div class="box_content">
      <img
        :src="img.header"
        alt
        style="border-radius: 10px"
        v-if="this.$route.params.id == 1"
      />
      <img
        :src="ordinary"
        alt
        style="border-radius: 10px"
        v-if="this.$route.params.id == 2"
      />
      <div class="box_content_bot" style="">
        <van-row
          class="box_content_info"
          v-for="item in membersGoods"
          :key="item.id"
          @click="toDetail(item.groupId)"
        >
          <van-col style="width: 30%">
            <img :src="item.picUrl" alt />
          </van-col>
          <van-col style="width: 70%">
            <div class="cont2" style="font-size: 15px">
              <p style="margin: 0">{{ item.name }}</p>
              <p style="color: #d0d0d0; font-size: 12px; margin: 5px 0 0 0">
                <span>总共{{ item.total }}件</span>
              </p>
            </div>
            <!-- <div class="cont3" style="font-size: 12px">
              {{ item.brief }}
            </div> -->
            <!-- <div class="cont_z"> -->

            <div class="cont5">
              <span style="color: red; font-size: 13px">
                <span style="font-weight: 400">秒杀价￥</span>
                <span style="color: red; margin-right: 2px; font-size: 16px"
                  >{{ item.grouponPrice }} </span
                ><br />
                <span style="color: #d0d0d0; font-size: 12px">{{
                  item.tips
                }}</span>
                <!-- <span style="color: #d0d0d0">已拼{{ item.sold }}件</span> -->
              </span>
            </div>
          </van-col>
          <van-col
            style="border: 0.1px solid #f2f2f2; width: 100%; margin-top: 15px"
          ></van-col>
        </van-row>
      </div>
    </div>
    <!-- 弹出层 -->

    <!-- 定位立即开通会员 -->
  </div>
</template>
<script>
import {
  topicDetail,
  authInfo,
  adList,
  getOrderSign,
  gethomebutons,
  groupList,
} from '@/api/api';
import { Row, Col, Tag, Toast, Popup, Search, Dialog, Divider } from 'vant';
import { getLocalStorage } from '@/utils/local-storage';
import BackTop from '@/components/backtop';
import member_card_head from '@/assets/images/member_card_head.png';
import ordinaryfoot from '@/assets/images/ordinaryfoot.jpg';
import ordinary from '@/assets/images/ordinary.jpg';
export default {
  name: 'purchase_list',
  data() {
    return {
      membersGoods: [],
      padun: '',
      ordinaryfoot: ordinaryfoot,
      ordinary: '',
      vipid: null,
      membersTopic: {},
      userInfo: {},
      message: '',
      isShow: false,
      img: {
        header: '',
        footer:
          'https://xintu361.oss-cn-qingdao.aliyuncs.com/btojaronwksl22m4x21f.jpg',
      },
      orderSn: undefined,
    };
  },
  created() {
    this.init();
    this.getMembers();
    this.getUserInfo();
  },
  methods: {
    toDetail(id) {
      this.$router.push(`/items/purchase/${id}/1`);
    },
    async init() {
      // 普通
      // gethomebutons({
      //   userId: Number(getLocalStorage('userId').userId),
      //   mode: "98,99",
      // }).then((res) => {
      //   this.ordinary = res.data.data[0].image;
      // });
      //获取渲染图片

      // 金牌
      await adList({
        position: 99,
      })
        .then((res) => {
          let list = res.data.data.list || [];

          list.forEach((item) => {
            this.img.header = item.url;
            if (item.id == 1386) {
              if (item.url) {
                this.img.header = item.url;
              }
            }
            if (item.id == 1387) {
              if (item.url) {
                this.img.footer = item.url;
              }
            }
          });
        })
        .catch((err) => {});
      // 普通
      await adList({
        position: 98,
      })
        .then((res) => {
          let list = res.data.data.list || [];

          list.forEach((item) => {
            this.ordinary = item.url;
          });
        })
        .catch((err) => {});
    },

    // 获取用户会员信息
    getUserInfo() {
      authInfo().then((res) => {
        this.userInfo = res.data.data;
      });
    },
    //获取标签逻辑
    getKeywords(str) {
      let arr = [];
      arr = str.split(',');
      return arr;
    },
    // 会员商品列表
    getMembers() {
      groupList()
        .then((res) => {
          this.membersGoods = res.data.data.list;
          this.padun = res.data.data.topic.id;
        })
        .catch((res) => {
          console.log(res);
        });
    },
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Divider.name]: Divider,
    [Tag.name]: Tag,
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [BackTop.name]: BackTop,
    [Search.name]: Search,
  },
};
</script>
<style scoped lang="scss">
.btn_sear_z {
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  padding: 0 16px;

  .btn_sear {
    color: #999999;
    width: 100%;
    height: 30px;
    border-radius: 15px;
    background-color: #fff;
    border: 0 solid #fff;
    text-align: left;
    padding-left: 10px;
    display: flex;
    align-items: center;

    span {
      margin-left: 2px;
    }
  }
}

.popu_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  span:nth-child(1) {
    font-size: 16px;
  }

  span:nth-child(2) {
    margin-top: 10px;
    font-size: 12px;
    color: #ccc;
  }

  .popu_content_anniu {
    margin-top: 30px;
    border-radius: 8px;
    text-align: center;
    line-height: 40px;
    width: 176px;
    height: 40px;
    font-size: 16px;
    background-color: #fec51c;
  }
}

// /deep/.van-toast {
//   line-height: 20px;
//   width: 50px;
//   letter-spacing: 2px;
//   font-size: 30px;
// }
.pos_bot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.pos_back {
  position: fixed;
  bottom: 40px;
  right: 16px;
}

img {
  vertical-align: bottom;
}

.box_z {
  position: relative;
  top: 0;
  bottom: 0;

  .beijing {
    width: 100%;
    height: 530px;
    background-image: url('https://santu-dev.oss-cn-shanghai.aliyuncs.com/4406uxnnhtsoxkcn9jqn.jpg');
  }

  .box_content {
    left: 0;
    padding: 0 16px;
    width: 100%;
    height: 100%;

    // background-color: pink;
    img {
      width: 100%;
    }

    .box_content_bot {
      width: 100%;
      //   height: calc(100vh - 232px);

      .box_content_tit {
        display: flex;
        align-items: center;
        margin: 5px 0 20px 0;

        .tit_tequan {
          height: 24px;
          font-size: 18px;
          font-weight: 700;
          margin-right: 10px;
        }

        .tit_sp {
          display: flex;
          line-height: 28px;
          height: 24px;
        }
      }

      .box_content_info {
        // padding: 15px 10px;

        border-radius: 10px;
        margin-top: 15px;
        background-color: #fff;
        // box-shadow: 0 0 5px #888888;
        color: rgba(16, 16, 16, 1);
        .van-col:nth-child(1) {
          border-radius: 3px;
          overflow: hidden;
        }

        .van-col:nth-child(2) {
          padding-left: 8px;
          display: flex;
          height: 97px;
          justify-content: space-between;
          flex-direction: column;

          .cont1 {
            display: flex;
            align-items: center;
            padding-left: 6px;
            height: 24px;
            border-radius: 2px;
            background-color: #fae3a8;

            img {
              width: 20px;
              height: 20px;
            }

            span:nth-child(1) {
              font-weight: 600;
              color: rgba(171, 121, 9, 1);
              margin: 0 6px;
            }

            span:nth-child(3) {
              font-weight: 600;
              color: #f70707;
            }
          }

          .cont2 {
            p:nth-child(1) {
              font-size: 14px;
              color: rgba(21, 20, 20, 1);
              font-weight: 700;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }

          .cont3 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            span {
              color: rgba(16, 16, 16, 1);

              .van-tag:nth-of-type(n + 1) {
                margin: 8px 8px 0 0;
              }
            }
          }

          .cont4 {
            // margin-left: 6px;
            margin-top: 4px;
            font-size: 12px;
            // font-weight: 600;
            color: #7e7b7b;
            // color: red;
          }

          .cont5 {
            display: flex;
            align-items: center;
            // justify-content: center;
            font-size: 16px;
            font-weight: 600;
            color: #f70707;

            img {
              margin-left: 3px;
              width: 48px;
              height: 16px;
            }
          }

          // .cont_z {
          //   display: flex;
          //   align-items: center;
          //   margin-top: 7px;
          //   // height: 20px;
          // }
        }
      }
    }
  }
}
</style>
